<template>
  <p>
    <a-space>
      <station-select v-model:stationName="startTrain" width="200px" placeholder="起始站"></station-select>

      <station-select v-model:stationName="endTrain" width="200px" placeholder="终点站"></station-select>

      <a-date-picker v-model:value="selectDate" valueFormat="YYYY-MM-DD"
                     placeholder="请选择日期"/>
      <a-button type="primary" @click="handleQuery">查询</a-button>
    </a-space>
  </p>
  <a-table :dataSource="dailyTrainTickets"
           :columns="columns"
           :pagination="pagination"
           @change="handleTableChange"
           :loading="loading">
    <template #bodyCell="{ column, record }">
      <template v-if="column.dataIndex === `station`">
        {{record.start}} <br/> {{record.end}}
      </template>

      <template v-if="column.dataIndex === `time`">
        <span style="color: #333333; font-weight: bolder">{{record.startTime}}</span> <br/>
        <span style="color: #9c9a99; font-weight: bold">{{record.endTime}}</span>
      </template>

      <template v-if="column.dataIndex === `duration`">
        <span style="color: #333333; font-weight: bolder">{{calculateDurationInHours(record.startTime,record.endTime)}}</span>
        <div v-if="record.startTime.replaceAll(',','') <= record.endTime.replaceAll(',','')">
          <span style="color: #9c9a99; font-weight: bold">当日到达</span>
        </div>
        <div v-else><span style="color: #9c9a99; font-weight: bold">次日到达</span></div>
      </template>

      <template v-if="column.dataIndex === `ydz`">
        <div v-if="record.ydz >= 0">
          {{record.ydz}}<br/>
          ￥ {{record.ydzPrice}}
        </div>
        <div v-else>----</div>
      </template>

      <template v-if="column.dataIndex === `edz`">
        <div v-if="record.edz >= 0">
          {{record.edz}}<br/>
          ￥ {{record.edzPrice}}
        </div>
        <div v-else>----</div>
      </template>

      <template v-if="column.dataIndex === `rw`">
        <div v-if="record.rw >= 0">
          {{record.rw}}<br/>
          ￥ {{record.rwPrice}}
        </div>
        <div v-else>----</div>
      </template>

      <template v-if="column.dataIndex === `yw`">
        <div v-if="record.yw >= 0">
          {{record.yw}}<br/>
          ￥ {{record.ywPrice}}
        </div>
        <div v-else>----</div>
      </template>

      <template v-if="column.dataIndex === `operation`">
        <a-button type="primary" @click="toOrder(record)">预定</a-button>
      </template>
    </template>

  </a-table>
</template>

<script setup lang="ts" name="ticket-view">
import {onMounted, ref} from 'vue';
import {notification} from "ant-design-vue";
import {query} from "@/api/ticket";
import {QueryParams} from "@/api/ticket/type.ts";
import StationSelect from "@/components/station-select.vue";
import dayjs from "dayjs";
import {useRouter} from "vue-router";
import {copyObj} from "@/utils/tools.ts";
import {setLocalSessionItem} from "@/utils/localSession.ts";

const router = useRouter();
const selectDate = ref(undefined);
const startTrain = ref(undefined);
const endTrain = ref(undefined);

const toOrder = (record: any) => {
  const value =copyObj(record);
  setLocalSessionItem("dailyTrainTicket", value);
  router.push("/order")
}
const calculateDurationInHours = (startTime:any, endTime:any) => {
    const diff = dayjs(endTime,"HH:mm:ss").diff(dayjs(startTime,"HH:mm:ss"),'second');
    return dayjs("00:00:00","HH:mm:ss").second(diff).format("HH:mm:ss")
}

const dailyTrainTickets = ref([]);
// 分页的三个属性名是固定的
const pagination = ref({
  total: 0,
  current: 1,
  pageSize: 10,
});
let loading = ref(false);
const columns = [
  {
    title: '日期',
    dataIndex: 'date',
    key: 'date',
  },
  {
    title: '车次编号',
    dataIndex: 'trainCode',
    key: 'trainCode',
  },
  {
    title: '车站',
    dataIndex: 'station',
    key: 'start',
  },
  {
    title: '时间',
    dataIndex: 'time',
    key: 'endTime',
  },
  {
    title: '历时',
    dataIndex: 'duration',
    key: 'duration',
  },
  {
    title: '一等座',
    dataIndex: 'ydz',
    key: 'ydz',
  },
  {
    title: '二等座',
    dataIndex: 'edz',
    key: 'edz',
  },
  {
    title: '软卧',
    dataIndex: 'rw',
    key: 'rw',
  },
  {
    title: '硬卧',
    dataIndex: 'yw',
    key: 'yw',
  },{
    title: '操作',
    dataIndex: 'operation',
    key: 'operation',
  }
];
const handleQuery = async (param: QueryParams) => {
  if (!param) {
    param = {
      pageNum: 1,
      pageSize: pagination.value.pageSize
    };
  }
  loading.value = true;
  try {
    const result = await query({...param,date: selectDate.value,
      endTrain:endTrain.value,
      startTrain:startTrain.value,
    } as any);

    if (result.success) {
      dailyTrainTickets.value = result.data as any;
      // 设置分页控件的值
      pagination.value.current = param.pageNum as number;
      pagination.value.total = result.total;
    } else {
      notification.error({message: "失败", description: result.message});
    }
  } catch (e: any) {
    notification.error({message: "失败", description: e.message});
  }
  loading.value = false;
};

const handleTableChange = (page: any) => {
  // console.log("看看自带的分页参数都有啥：" + JSON.stringify(page));
  pagination.value.pageSize = page.pageSize;
  handleQuery({
    pageNum: page.current,
    pageSize: page.pageSize
  });
};

onMounted(() => {
  handleQuery({
    pageNum: 1,
    pageSize: pagination.value.pageSize
  });
})
</script>

<style>
[data-doc-theme='light'] .ant-table-striped :deep(.table-striped) td {
  background-color: #fafafa;
}
[data-doc-theme='dark'] .ant-table-striped :deep(.table-striped) td {
  background-color: rgb(29, 29, 29);
}
</style>
